<template>
    <div class="home__header">
        <div class="info__container animate__animated animate__bounceInDown animate__slow">
            <p class="chinaname__text">{{ userStore.userInfo.chinaname }}</p>
            <n-badge dot type="success" />
        </div>
        <div class="menu__container animate__animated animate__bounceInDown animate__slow">
            <n-tooltip placement="bottom" trigger="click">
                <template #trigger>
                    <li>
                        <n-icon :size="22">
                            <Cellular />
                        </n-icon>
                    </li>
                </template>
                <p> <n-badge :color="netWorkInfo.type === 'offline' ? '#f40' : 'green'" processing dot /><span
                        style="margin-left:6px">{{ netWorkInfo.type }}</span></p>
                <p>{{ netWorkInfo.rtt }}ms</p>
                <p>{{ netWorkInfo.downlink }}Mb / s</p>
            </n-tooltip>
            <li @click="addPerson">
                <n-icon :size="22">
                    <PersonAdd />
                </n-icon>
            </li>
            <li>
                <LanguageSwitch :icon-size="22" />
            </li>
            <li>
                <theme-switch />
            </li>
        </div>
    </div>
</template>

<script setup lang='ts' name="HomeHeader">
import { Cellular, PersonAdd } from '@vicons/ionicons5';
import themeSwitch from '@/components/themeSwitch.vue';
import LanguageSwitch from '@/components/LanguageSwitch.vue';
import { NetworkInfo, getNetWorkInfo } from '@/utils'
import { useUserStore } from '@/stores/user';
import EventEmiiter from '@/utils/EventEmiiter';
const router = useRouter();
const userStore = useUserStore();

const netWorkInfo = reactive<NetworkInfo>({
    type: 'offline',
    rtt: 0,
    downlink: 0
})
// 更新用户网络请求
function updateInfo() {
    const info = getNetWorkInfo();
    Object.assign(netWorkInfo, info);
};
updateInfo();
window.addEventListener('online', () => {
    updateInfo();
});
window.addEventListener('offline', () => {
    updateInfo();
});
const addPerson = () => {
    router.push('/home/accomUser');
    EventEmiiter.emit('VIEW:CHANGE_MENU', '/home/accomUser');
};

</script>
<style scoped lang='scss'>
.home__header {
    display: grid;
    height: 50px;
    padding: 0 1rem;
    grid-template-columns: 120px auto;
    position: sticky;
    top: 0;
    align-items: center;
    z-index: 9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.27);

    @include useTheme {
        background: getVar('homeNavBg');
    }

    .info__container {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .chinaname__text {
            @include useTheme {
                color: getVar('text');
                font-size: 0.85rem;
                font-weight: bold;
            }
        }
    }

    .menu__container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1.5rem;
        cursor: pointer;

        li {
            display: flex;
            align-items: center;
            transform: color .37s;

            @include useTheme {
                color: getVar('text');
            }

            &:hover {
                color: #4090EF !important;
            }
        }
    }
}

// 好友部分
.friend-item {
    display: grid;
    grid-template-columns: 50px auto;
    gap: 6px;
    align-items: center;
    padding: 12px;


    &.request {
        grid-template-columns: 50px auto 100px;
    }

    &:hover {
        background: rgba(0, 0, 0, 0.09);
    }

    border-bottom: 1px solid rgba(0, 0, 0, 0.17);
    cursor: pointer;

    .friend-info {
        display: flex;
        flex-direction: column;
        gap: 3px;

        .user-name {
            line-height: 0;
            font-size: 1rem;
            font-weight: bold;
        }
    }

    .friend-operation {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;

        .req-date-wrap {
            color: #999;
            font-size: 0.7rem;
        }
    }
}

/* 方案1：使用更新的 deep 语法 */
:deep(.n-drawer-body-content-wrapper) {
    padding: 0 !important;
}
</style>